<template>
  <div>
    <el-card>
      <!-- 搜索及按钮 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            class="input-with-select"
            @input="sousuo"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="dialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 用户列表 -->
      <el-table
        :data="userList"
        border
        stripe
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        style="width: 100%"
        class="mt-2"
      >
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="联系方式"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="edit(scope.row.id)"
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-s-tools"
              @click="quanxian(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 3, 4, 6]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加用户遮罩层 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="50%"
      :append-to-body="true"
    >
      <el-form ref="addusers" label-width="120px" :model="addusers">
        <el-form-item label="户名" prop="username">
          <el-input v-model="addusers.username" size="small" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addusers.password" show-password size="small" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addusers.email" show-password size="small" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addusers.mobile" show-password size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmAddUser">确认修改</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑用户遮罩层 -->
    <el-dialog
      title="编辑用户"
      :visible.sync="editshow"
      width="50%"
      :append-to-body="true"
    >
      <el-form ref="editusers" label-width="120px" :model="editusers">
        <el-form-item label="户名" prop="username">
          <el-input v-model="editusers.username" size="small" disabled />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editusers.email" show-password size="small" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editusers.mobile" show-password size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confrimedit">确认修改</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 更改权限 -->
    <el-dialog
      title="更改权限"
      :visible.sync="roleShow"
      width="50%"
      :append-to-body="true"
    >
      <el-form ref="roleusers" label-width="120px" :model="roleusers">
        <el-form-item label="户名" prop="username">
          <el-input v-model="roleusers.username" size="small" disabled />
        </el-form-item>
        <el-form-item label="当前权限" prop="role_name">
          <el-input v-model="roleusers.role_name" size="small" disabled />
        </el-form-item>
        <el-form-item label="更改权限" prop="mobile">
          <el-select v-model="roleusers.rid" filterable placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ConfirmRole">确认修改</el-button>
          <el-button @click="roleShow = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserList,
  addUser,
  getuserId,
  editUser,
  delId,
  getAllRoles,
  setRole,
} from "@/api/user";
export default {
  data() {
    return {
      queryInfo: {
        query: "",
        // 当前页
        pagenum: 1,
        // 每页几条数据
        pagesize: 6,
      },
      // 用户列表
      userList: [],
      // 分页总页数
      total: 1,
      // 添加用户界面，是否显示弹框
      dialogVisible: false,
      // 添加用户信息
      addusers: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      // 编辑框显示隐藏
      editshow: false,
      // 编辑的id信息
      editId: 0,
      // 编辑用户信息
      editusers: {
        username: "",
        email: "",
        mobile: "",
      },
      // 权限的弹窗
      roleShow: false,
      // 编辑权限信息
      roleusers: {
        username: "",
        role_name: "",
        rid: "",
      },
      // 获取所有的角色权限信息
      roleList: [],
    };
  },
  methods: {
    // 获取数据列表
    async getlist() {
      //  解构出用户列表
      const {
        data: { users, total },
      } = await getUserList(this.queryInfo);
      // 将数据添加到新的数组，进行渲染遍历
      this.userList = users;
      // 数据总条数
      this.total = total;
    },

    // 分页 当页面数据发生变化触发的回响
    async handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      await this.getlist();
    },
    // 分页 当页发生变化时触发的回响
    async handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      await this.getlist();
    },
    // 模糊查询
    async sousuo() {
      this.queryInfo.pagenum = 1;
      await this.getlist();
    },

    // 添加用户信息
    // 确认修改
    async confirmAddUser() {
      let { meta } = await addUser(this.addusers);
      // 如果请求成功
      if (meta.status == 201) {
        this.$message.success("请求成功");
      }
      // 置空表单
      this.$refs.addusers.resetFields();
      // this.addusers.username = "";
      // 关闭弹窗
      this.dialogVisible = false;
      // 获取最新的列表数据去进行渲染
      await this.getlist();
      // 跳转到最后对应的页码，展示数据
      let newPagenum = Math.ceil(this.total / this.queryInfo.pagesize);
      this.handleCurrentChange(newPagenum);
    },

    // 编辑用户信息， 获取用户id
    async edit(id) {
      // 获取到编辑的id信息，传递到全局
      this.editId = id;
      // 显示编辑弹框
      this.editshow = true;
      // 获取指定id用户信息
      let { data } = await getuserId(id);
      // 数据回显
      this.editusers = data;
    },

    // 确定修改编辑信息
    async confrimedit() {
      let { meta } = await editUser(this.editId, this.editusers);
      if (meta.status == 200) {
        // 提示编辑成功
        this.$message.success("更新成功");
        // 关闭弹窗
        this.editshow = false;
        // 获取最新的列表数据去进行渲染
        this.getlist();
      }
    },

    // 删除对应数据信息
    async del(id) {
      try {
        // 删除弹窗
        let res = await this.$confirm(
          "此操作将永久删除该用户, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
        console.log(res);
        // 点击确认按钮
        if (res == "confirm") {
          let { meta, data } = await delId(id);
          console.log(data);
          if (meta.status == 200) {
            // 提示编辑成功
            this.$message.success("删除成功");
            // 重新渲染页面
            this.getlist();
            // 跳转最后一页
            let newPagenum = Math.ceil(this.total / this.queryInfo.pagesize);
            this.handleCurrentChange(newPagenum);
          }
        }
      } catch (error) {
        this.$message("取消操作");
      }
    },

    // 权限配置
    async quanxian(row) {
      // 权限配置的弹框
      this.roleShow = true;
      // 要渲染的用户信息
      this.roleusers = row;
      // 获取所有角色的权限信息
      let { data } = await getAllRoles();
      this.roleList = data;
    },
    // 确认修改权限
    async ConfirmRole() {
      // 如果没有选择，则提醒
      if(!this.roleusers.rid){
        return this.$message.error('请选择要分配的权限')
      }
      // 获取到分配的权限
      let {meta} = await setRole(this.roleusers.id, this.roleusers.rid)
      if(meta.status == 200){
        this.$message.success('分配角色权限成功')
      }
      // 关闭弹窗
      this.roleShow = false
      // 更新渲染页面
      this.getlist()
    },
  },
  created() {
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
</style>